/* eslint-disable no-undef */
<template>
  <div class="body">
    <!-- 头部栏 -->
    <el-header class="header">
      <div>
        <div class="login_text" @click="gohome()">聚图信息</div>
      </div>
      <!-- <div>
        <router-link to="/login" class="login_text02">登录</router-link>
        <div class="vertical">|</div>
        <router-link to="/register" class="login_text03">注册</router-link>
      </div> -->
    </el-header>
    <!-- 文章内容 -->
    <div class="box clearfix">
      <h1 style="text-align:center">{{title}}</h1>
      <div class="content">{{content}}</div>
    </div>
    <div class="pic"></div>
    <!-- 底部 -->
    <el-footer>Footer</el-footer>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  components: {
    axios
  },
  data () {
    return {
      title: '',
      content: ''
    }
  },
  created () {
    this.getArticleId()
    this.getArticleInfo()
    this.showDetailedInformation()
  },
  methods: {
    // 回到首页
    gohome () {
      this.$router.replace('/')
    },
    // 获取文章id
    getArticleId () {
      this.id = window.sessionStorage.getItem('articleId')
      console.log('articleId', this.id)
    },
    // 获取详细信息
    async getArticleInfo () {
      await this.$axios
        .get('pogofficialinfo/' + this.id)
        .then((res) => {
          if (res.data.code === 200) {
            this.title = res.data.data.title
            this.content = res.data.data.content
          } else {
            this.$message.info('详细信息获取失败')
          }
        })
        .catch((res) => {
          this.$message.error('详细信息请求失败！')
          console.log('getArticleInfoError', res)
        })
    },
    showDetailedInformation () {
      // eslint-disable-next-line no-undef
      const reason = content.replace(/<[^>]+>/g, '')
      this.content = reason
    }
  }

}
</script>

<style scoped>
* {
  padding: 0;
  margin: 0;
}
.body {
  background-color: #f8f9fa;
}
html {
  width: auto;
}
/* 头部栏 */
.gohome {
  float: left;
  margin-right: 100px;
  font-size: 16px;
  font-weight: 900;
  text-decoration: none;
}
.header {
  position: relative;
  justify-content: space-between;
  height: 60px;
  width: 100%;
  box-shadow: 0px 15px 10px -15px #4c61a0;
  margin-bottom: 10px;
  /* 内容垂直居中显示 */
  display: flex;
  align-items: center;
}
/* 头部栏图片 */
.logo_top {
  float: left;
  margin-left: 10px;
  height: 40px;
  width: 50px;
}
/* 头部栏文字：快修 */
.login_text {
  float: left;
  font-size: 36px;
  color: #4c61a0;
  margin-left: 50px;
}
.vertical {
  float: left;
  margin-right: 20px;
  line-height: 42px;
}
.login_text03 {
  float: left;
  margin-right: 80px;
  font-size: 16px;
  font-weight: 900;
  text-decoration: none;
  line-height: 50px;
}
/* 头部栏右侧注册登录字 */
.login_text02 {
  float: left;
  margin-right: 20px;
  font-size: 16px;
  font-weight: 900;
  text-decoration: none;
  line-height: 42px;
}
.pic {
  background-image: url('..\assets\images\background\bg.jpg');
  height: 240px;
  background-position: 0px -190px;
  background-repeat: no-repeat;
}
.box {
  float: left;
  width: 1480px;
  background-color: #fff;
  margin:180px 220px;
  border-top: 4px solid #4c61b5;
  border-bottom: 4px solid #4c61b5;
}

/*使用:after伪元素法清除浮动*/
.clearfix:after {
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.clearfix {
*zoom: 1;
}
.content {
  padding: 20px;
  font-size: 20px;
}
.el-footer {
  position: absolute;
  bottom: 0px;
  width: 100%;
  background-color: #111212;
  color: #333;
  text-align: center;
  line-height: 60px;
}
</style>
